<template>
    <div class="checkbox-group">
        <div class="header-container">
            <h1>{{ name }}号包间</h1>
        </div>
    <div class="custom-collapse-container">
    <el-collapse v-model="activeNames" @change="handleChange">
    <el-collapse-item title="商品项目" name="1" class="custom-collapse-title" >
      <div style="display: flex; flex-wrap: wrap; justify-content: flex-start;">
      <div v-for="(item, index) in options" :key="index" class="checkbox-row">
        <span class="icon-slot custom-checkbox-icon">
          <div class="custom-checkbox-container">
            <img src="../assets/images/shop.png" class="custom-checkbox-image"  />
            <div class="item-name">{{ item.name }}</div>
          </div>
           <div style="color: red;"> {{ item.amount }}元/次</div>
            <div>
              <el-select v-model="item.employeeIng" placeholder="请选择技师" style="width: 130px;" size="mini" >
                <el-option
                    v-for="(employee, index) in item.employees"
                    :key="index"
                    :label="employee.nickname"
                    :value="employee.nickname"
                  ></el-option>
        </el-select>
            </div>
            <div style="height: 4px;"></div>
            <div>
              <el-select v-model="item.employeeType" placeholder="技师类型" style="width: 130px;" size="mini">
              <el-option label="点钟" value="点钟"></el-option>
              <el-option label="排钟" value="排钟"></el-option>
        </el-select>
            </div>
            <div style="height: 4px;"></div>
            <el-input-number  size="mini"  v-model="item.count" @change="handleChange" :min="0" :max="20" label="次数"></el-input-number>
        </span> 
      </div>
    </div>
    </el-collapse-item>
    <!-- <el-collapse-item title="项目技师" name="2" class="custom-collapse-title" >
      <div style="display: flex; flex-wrap: wrap; justify-content: flex-start;">
      <el-checkbox-group v-model="personValues" class="checkbox-row">
      <div style="display: flex; flex-wrap: wrap; justify-content: flex-start;">
      <el-checkbox v-for="(item, index) in person" :key="index"  :label="item.id"  class="checkbox-row" >
        <span class="icon-slot custom-checkbox-icon " >
          <div>
              <img src="../assets/images/person.png" class="custom-checkbox-image"  /> 
              <div>   {{ item.nickname }} </div>
              <div>   {{ item.type }} </div>
              <el-input-number  size="small"  v-model="item.count" @change="handleChange" :min="1" :max="1" label="次数"></el-input-number>
          </div> 
        </span> 
      </el-checkbox>
      </div>
    </el-checkbox-group>
    </div>
    </el-collapse-item> -->
    </el-collapse>
    </div>
    <div class="custom-collapse-container-center"></div>
    <div class="custom-collapse-container-right">
      <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="font-size: 24px; font-weight: bold; ">下单项目</span>
        <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
      </div>
      <el-table
    :data="filteredOptions"
    stripe
    style="width: 100%">
    <el-table-column
      prop="name"
      label="消费名称"
      min-width=13% >
    </el-table-column>
    <el-table-column
      prop="count"
      label="次数"
      min-width=8%>
    </el-table-column>
    <el-table-column
      prop="employeeIng"
      label="技师"
      min-width=13%>
    </el-table-column>
    <el-table-column
      prop="employeeType"
      label="类型"
      min-width=10%>
    </el-table-column>
    <el-table-column
      prop="amount"
      label="价格"
      min-width=8%>
      <template slot-scope="scope">
      <span>{{ scope.row.count * scope.row.amount }}元</span>
    </template>
    </el-table-column>
  </el-table>
  <div>
    <br>
   <!-- <p style="font-size: 24px; font-weight: bold;">服务技师</p>
   <div v-for="id in personValues" :key="id">
    使用 find 方法查找 person 数组中 id 对应的项
    <div v-if="findPerson(id)">
      <br>
      <img :src="findPerson(id).avatar" />
      <el-tag style="font-size: 24px;">  {{ findPerson(id).nickname }}</el-tag>
      其他属性...
    </div>
  </div> -->
    </div>
</el-card>
<br>
<br>
<div  class="footer-container">
      <el-row  type="flex" justify="start" align="center">
        <el-col :span="12">
        <el-button type="primary" @click="quit">取消下单</el-button>
      </el-col>
      <el-col :span="12">
        <el-button type="success" @click="submitOrder">确认下单</el-button>
      </el-col>
    </el-row>
  </div>

    </div>
    </div>
  </template>
  
  <script>
  import {get, post} from "../utils/request";
  import { isJSON } from "../utils/isJSON";

  export default {
    data() {
      return {
        floor:"",
        name:"",
        activeNames: ['1', '2' ],
        options: [],
        person: [],
        selectedValues: [], // 存储已选择的值
        personValues:[],
        dialogVisible: false,
      };
    },
    created:function(){
             this.name =this.$route.params.name;
             this.floor=this.$route.params.floor;
            },
   computed: {
    filteredOptions() {
      return this.options.filter(option => option.count > 0);
    }
  },
    methods: {
      quit() {
          this.$router.push({
          path:"roomManage",
          name:"roomManage",
          })
    },
      submitOrder() {
        let data = {
        name:this.name,
        commodities: this.filteredOptions,
      }
      console.log(data)
        post('/api/order/add', data)
          .then(res => {
            console.log(res);
            if (res.data.code === '200') {
              this.$message({
              message: '下单成功',
              type: 'success',
              duration: 2000
            });
            this.$router.push({
            path:"roomManage",
            name:"roomManage",
            })

          }
          })
          .catch(err => {
            console.log(err);
          })
    },
    closeDialog() {
      this.dialogVisible = false;
    },
      findPerson(id) {
      return this.person.find(person => person.id === id);
    },
      hotelListRequest(data) {
       post('/api/commodity/all', data)
          .then(res => {
            console.log(res);
            this.options = res.data.data
          })
          .catch(err => {
            console.log(err);
          })
    },
    employeeListRequest(data) {
       post('/api/employee/all', data)
          .then(res => {
            console.log(res);
            this.options.employee= res.data.data
          })
          .catch(err => {
            console.log(err);
          })
    },
        handleChange(val) {
        console.log(val);
      },
      handleCheckChange(value) {
        this.$set(this.selectedValues, value, !this.isSelected(value));
      },
      isSelected(value) {
        return this.selectedValues.includes(value);
      },
    },
    mounted(){
        this.hotelListRequest()
        // this.employeeListRequest()
      },
  };
  </script>
  
  <style scoped>
  .custom-checkbox-container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}
  .item-name {
  flex: 1; /* 保证文本能自动填充剩余空间，并保持在同一行 */
  text-align: left; /* 文本向右对齐 */
}
  .container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 使容器高度至少为视窗高度 */
}

.footer-container {
  width: 100%;
  height: 50px; /* 根据需要设置底部区域的高度 */
  background-color: #f8f8f8; /* 可选：设置背景色 */
  padding-left: 20px; /* 根据需要调整左侧边距 */
}
   .text {
    font-size: 18px;
    font-weight: bold; 
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    height: 90%;
  }
  .custom-collapse-title /deep/ .el-collapse-item__header{
        font-size: 24px; /* 设置标题字体大小 */
        font-weight: bold; /* 加重字体 */
    }

  .custom-collapse-container {
  width: 63%;
  margin: 0 ; /* 借助外层容器进行居中 */
}
.custom-collapse-container-center {
  width: 2%;
  margin: 0 ; /* 借助外层容器进行居中 */
}
.custom-collapse-container-right {
  width: 33%;
  margin: 0 ; /* 借助外层容器进行居中 */
}
  .header-container {
  width: 100%;
  text-align: center; /* 设置文本居中 */
}

.header-container h1 {
  font-size: 32px; /* 设置字体大小，这里以32像素为例 */
}
  .custom-checkbox-image {
   height: 50px; /* 设置图片宽度 */
  object-fit: contain; /* 可以根据需要选择不同的图片填充模式，contain保证图片按比例缩放且完全显示在框内 */
  margin-right: 1px; 
}
  .checkbox-group {
    display: flex;
    flex-wrap: wrap;
  }
  .custom-checkbox-icon {
  align-items: center;
  border: 3px solid #2d7ded; /* 替换为你想要的颜色 */
  border-radius:5px; /* 设置边框圆角大小 */
  padding: 2px; /* 可以根据需要调整内边距 */
    }
  .checkbox-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 5px;
  }
  
  .clearfix {
    clear: both;
  }
  
  .icon-slot {
    margin-right: 7px;
    display: inline-block;
  }
  </style>